<template>
  <div>
    <!-- <el-radio-group v-model="direction">
  <el-radio label="ltr">从左往右开</el-radio>
  
</el-radio-group> -->

    <el-button
      @click="telephone_input"
      type="primary"
      style="margin-left: 16px"
    >
      点我打开
    </el-button>

    <el-drawer
      size="75%"
      :withHeader="false"
      :visible="usersidebar"
      :direction="direction"
      @close="close"
      class="drawerWrap"
    >
      <!-- <span>我来啦!</span> -->
      <div>
        <div class="top-list">
          <!-- icon图标 -->
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bianzubeifen3"></use>
          </svg>
          <span>{{ telephone }}</span>
        </div>
        <div class="menu-list">
          <ul>
            <li>
              <div class="travel">
                <router-link to="/user/travel" style="text-decoration: none">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hangcheng"></use>
                  </svg>
                  <span class="text">行程</span>
                </router-link>
              </div>
            </li>
            <li>
              <div class="travel">
                <router-link to="/user/wallet" style="text-decoration: none">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-qianbao"></use>
                  </svg>
                  <span class="text">钱包</span>
                </router-link>
              </div>
            </li>
            <li>
              <div class="travel">
                <router-link to="/user/setting" style="text-decoration: none">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shezhi"></use>
                  </svg>
                  <span class="text">设置</span>
                </router-link>
              </div>
            </li>
            <li>
              <div class="travel">
                <router-link to="/user/feedback" style="text-decoration: none">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tousujianyi"></use>
                  </svg>
                  <span class="text">反馈建议</span>
                </router-link>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom-list">
        <ul>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tuijian"></use>
            </svg>
            <span class="text">推荐有奖</span>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-duihuanquan1"></use>
            </svg>
            <span class="text">兑换券</span>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yangshi_icon_tongyong_driver"></use>
            </svg>
            <span class="text"> 司机招募</span>
          </li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      drawer: false,
      direction: 'ltr'
    }
  },
  computed: {
    ...mapState(['usersidebar', 'telephone'])
  },
  methods: {
    close() {
      this.$store.dispatch('close_usersidebar')
    },
    ...mapActions(['close_usersidebar', 'telephone_input'])
  }
}
</script>

<style scoped>
.drawerWrap /deep/ .el-drawer__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 头部div */
.top-list {
  color: #666;
  text-align: center;
  margin: 30px 0 40px;
}
/* 头像 */
.top-list .icon {
  margin-right: 1rem;
}
/* 中间菜单 */
.menu-list ul {
  padding: 0;
}
.menu-list ul li div {
  display: block;
  padding: 17px 0;
  text-decoration: none;
  text-align: left;
}
.menu-list ul li {
  padding: 0 16px;
  list-style: none;
}
.menu-list ul li .icon {
  margin-right: 16px;
}
.menu-list ul li .text {
  font-size: 16px;
  color: rgb(252, 145, 83);
}

/* 底部菜单 */
.bottom-list {
  padding: 20px;
}
.bottom-list ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.bottom-list ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottom-list ul li .icon {
  margin-bottom: 20px;
}
.bottom-list ul li .text {
  color: rgb(252, 145, 83);
}
</style>